<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>发帖</title>
    <style>
    .container{
        height: 100%;
    }
    .post{
        border: cadetblue solid 2px;
        border-radius: 8px;
        margin-top: 10%;
        height: 80%;
        display: block;
        background-color: azure;
    }
    .post-title{
        height: 100px;
        text-align: center;
    }
    .post-title>input{
        width: 60%;
        margin-top: 8%;
        border: cadetblue solid 2px;
        border-radius: 6px;
    }
    .post-text{
        text-align: center;
        height: 300px;
    }
    .post-text>textarea{
        width: 60%;
        height: 90%;
        margin-top: 3%;
        border: cadetblue solid 2px;
        border-radius: 6px;
    }
    .post-button{
        height: 100px;
        text-align: center;
        line-height: 80px;
    }



    </style>
</head>

<body>
    <div class="container">
        <form action="#" class="post">
            <!-- 标题 -->
            <div class="post-title">
                <input type="text" name="title" id="title" placeholder="给你的帖子起一个漂亮的标题">
            </div>
            <!-- 正文 -->
            <div class="post-text">
                <textarea name="text" id="text" cols="30" rows="10" placeholder="在此输入正文"></textarea>
            </div>
            <!-- 发布按钮 -->
            <div class="post-button">    
                <button type="button" id="btn" class="btn btn-primary">发布</button>
            </div>
        </form>
    </div>
</body>
<script src="../js/axios-min.js"></script>
<script src="../js/axios-min.js"></script>
<script>
    //绑定按钮事件
    document.getElementById("btn").onclick = function (){
        //将表单转为JSON
        var formData = {
        title:"" ,
        text:"",
        };

        //获取表单数据
        formData.title = document.getElementById("title").value;

        formData.text= document.getElementById("text").value;

        //发生ajax请求
        axios({
            method:"post",
            url:"../Text/addText",
            data:formData
        }).then(function (resp) {
            if(resp.data == "success")
                alert("发布成功");
            else
                alert("发布失败");
        })
    }
</script>
</html>